<template>
	<view class="box">
		<view class="header">
			<view class="iconfont icon-fanhui" @click="fanhuia">返回</view>
			<view class="">编辑水表</view>
			<view class=""> </view>
		</view>
		<view class="SZHEZI">
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">办公区</view>
					<view class="">(生产区)</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
			<input class="weui-input" type="text"  v-model="bangongqu"   placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">地址</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
					<input class="weui-input" type="text" v-model="dazhi" placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">水表号</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number"  v-model="num" placeholder="请输入" />
					</view>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">用水类型</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="array[yongshuileixing]" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker @change="bindPickerChange" :value="yongshuileixing" :range="array">
						<view class="picker iconfont icon-leixing">
						</view>
					</picker>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">安装时间</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="anzhuang" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker mode="date" :value="anzhuang" start="2015-09-01" end="2025-09-01" @change="bindDateChange">
						<view class="picker iconfont icon-rili">
						</view>
					</picker>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">效验时间</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="jiaoyan" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker mode="date" :value="jiaoyan" start="2015-09-01" end="2025-09-01" @change="bindDateChangeA">
						<view class="picker iconfont icon-rili">
						</view>
					</picker>
				</view>
			</view>
			<view class="shuzishurukuang">
				<view class="wenzibu">
					<view class="">水表类型</view>
				</view>
				<view class="weui-cells weui-cells_after-title">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" type="number" :value="arrayA[suibiaoleixing]" placeholder="请选择" />
					</view>
				</view>
				<view class="section">
					<picker @change="bindPickerChangeA" :value="suibiaoleixing" :range="arrayA">
						<view class="picker iconfont icon-leixing">
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="shenpiA">
			<view class="shenpi">审批意见</view>
			<view class="weui-cells weui-cells_after-title">
				<view class="weui-cell weui-cell_input">
					<view class="weui-cell__bd" style="margin: 30rpx 0">
						<input class="qingsr" name="input" placeholder="请输入" />
					</view>
				</view>
			</view>
		</view>
		<view class="tijiao">
			<button  @click="tianjia">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
import http from '../../../utils/http.js'
	export default {
		setup() {
			let data = reactive({
				dazhi:'',
				num:'',
				bangongqu:'',
				arrayA: ['工业用水', '生活用水', '生态用水', '其它用水'],
				array: ['自来水', '地表水', '地下水'],
				yongshuileixing: '请选择',
				suibiaoleixing: '请选择',
				anzhuang: '',
				jiaoyan: '',
				fanhuia() {
					uni.navigateBack({
						delta: 1
					})
				},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				data.yongshuileixing= e.detail.value
			},
			bindDateChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				data.anzhuang = e.detail.value
			},
			bindDateChangeA: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				data.jiaoyan= e.detail.value
			},
			bindPickerChangeA: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				data.suibiaoleixing  = e.detail.value
			},
		tianjia(){
			
			http({
				url: "/miniwatermeter/updataAddshuibaio",
				method: "post",
				data:{
					num:data.num, 
					anzhuang:data.anzhuang,
					 jiaoyan:data.jiaoyan,
					 yongshuileixing:data.array[data.yongshuileixing],
					 suibiaoleixing:data.arrayA[data.suibiaoleixing], 
					 dazhi:data.dazhi,
					 bangongqu: data.bangongqu	,
				     id:uni.getStorageSync('xiugai')
				}		
			}).then((res) => {
			if(res.data.code==200){
					uni.removeStorageSync( 'xiugai' );
				uni.navigateTo({
					url: '../shuibiaoguanli/shuibiaoguanli'
				})
			}
				
			 })
			
			   
		}
		
			});
			onMounted(() => {
		             	http({
							url: "/miniwatermeter/getshuibiao",
							method: "post",
								data:{
								id:uni.getStorageSync('xiugai')
								}			
						}).then((res) => {
				
							data.dazhi=res.data.data[0].sb_dazhi;
							data.num=res.data.data[0].sb_num;
							data.bangongqu=res.data.data[0].sb_bangongqu;
			                data.anzhuang=res.data.data[0].sb_anzhuang;
			                data.jiaoyan=res.data.data[0].sb_jiaoyan;
						for(let i=0; i< data.arrayA.length ;i++){
						
								if (  res.data.data[0].sb_yongshuileixing  == data.array[i]) {
								 data.yongshuileixing=i
								    } 	
						} ;     	
					          for(let i=0; i< data.array.length ;i++){
							if (  res.data.data[0].sb_suibiaoleixing  == data.arrayA[i]) {
							 data.suibiaoleixing=i
						} 	
				  	}  ;    
							
							
							
						 })
			})
			return {
				...toRefs(data)
			};
			
			
			
		},
		onLoad() {
	
		},
		
	}
</script>

<style lang="scss">
	@import url("~@/static/xzafont/font/iconfont.css");

	.header .icon-fanhui {
		font-size: 35rpx;
	}

	.box {
		font-size: 35rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		/* background-color: #FFFFFF; */
		line-height: 90rpx;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.SZHEZI {
		display: flex;
		flex-wrap: wrap;
		margin: 0 20rpx;
		border: 1rpx solid #E4E4E4;
	}

	.shuzishurukuang {
		display: flex;
		width: 100%;
		align-content: stretch;
		border: 1rpx solid #E4E4E4;
	}

	.wenzibu {
		display: flex;
		width: 180rpx;
		height: 90rpx;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		margin: 10rpx 20rpx;
	}

	.weui-cells {
		display: flex;
		align-items: center;
	}

	.tijiao {
		display: flex;
		justify-content: center;
	}

	.tijiao button {
		width: 300rpx;
		background-color: #0079FE;
		position: fixed;
		bottom: 0;
		height: 90rpx;
	}

	.shenpiA {
		margin-top: 20rpx;
	}

	.shenpi {
		margin-left: 60rpx;
	}

	.qingsr {
		width: 700rpx;
		height: 100rpx;
		margin: 0 30rpx;
		padding-left: 30rpx;
		border: 1rpx solid #E4E4E4;
	}

	.picker {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 30rpx 0rpx;
	}
</style>
